import React, { useEffect, useState } from 'react';
import { Row, Tabs } from 'antd';
// import Tabs from './Tabs';
import UserConfig from './UserConfig';

import './styles/header_menu.less';
import { useSelector } from 'react-redux';
import AgentService, { ICurrentTab, IEvent } from '@/modules/Agent';
import { useTranslation } from 'react-i18next';
import styled from '@emotion/styled';

interface HeaderMenuProps {
	changeLayout?: (layout: string) => void;
	changeHeader?: (tab: ICurrentTab) => void;
	currentTab?: ICurrentTab;
}

const MenuSpan = styled.span`
    color: #fff;
    position: relative;
    display: inline-block;
`;
const MenuDot = styled.span`
    background: #f00;
    display: inline-block;
    width: 10px;
    height: 10px;
	position: static;
    margin-bottom: 5px;
    border-radius: 50%;
    z-index: 1;
    margin-left: 2px;
`;

const HeaderMenu = (props: HeaderMenuProps) => {
	const { changeLayout, changeHeader, currentTab } = props;
	const { login } = useSelector(state => state) as any;
	const { configure } = AgentService;
	const { t } = useTranslation();
	const [menus, setMenus] = useState<any>([]);
	const [avtiveKey, setActiveKey] = useState<ICurrentTab>('sessionService');
	const [hasUnfinishedSummary, setUnfinishedSummary] = useState(AgentService.hasUnfinishedSummary);

    useEffect(() => {
		const handleNeedDoSummaryChange = (data: any) => {
			console.log('handleNeedDoSummaryChange', data.data.data.hasUnfinishedSummary);
			setUnfinishedSummary(data.data.data.hasUnfinishedSummary);
		};
        AgentService.addListener(IEvent.ON_NEED_DO_SUMMARY_CHANGE, handleNeedDoSummaryChange);

		// AgentService.getUnfinishedSummary();
		return () => {
			// removeListener
			AgentService.removeListener(IEvent.ON_NEED_DO_SUMMARY_CHANGE, handleNeedDoSummaryChange);
		};
    }, []);

	const getHeaderMenus = (headerMenus: any[]) => {
		let menus = [...headerMenus];
		menus.forEach(menu => {
			menu.label = t(menu.i18nKey);
		});
		if (configure.preferenceSettings.managementMenuHidden) {
			menus = menus.filter(item => item.key !== 'managementService');
		}
		if (configure.preferenceSettings.agentManagemenMenuHidden) {
			menus = menus.filter(item => item.key !== 'agentManagement');
		}
		return menus;
	};

	const changeTabs = (tab: ICurrentTab) => {
		if (tab !== 'managementService') {
			setActiveKey(tab);
			changeHeader && changeHeader(tab);
		} else {
			AgentService.entryOtherPage('enrtyManagement');
		}
	};

	useEffect(() => {
		console.log('AgentService', AgentService);
	}, [AgentService.agentStatus]);

	useEffect(() => {
		const menus = configure.preferenceSettings.headerMenus.filter(item => item.key !== 'agentManagement');
		setMenus(getHeaderMenus(menus));

		AgentService.addEventListener(resp => {
			if (resp.event === IEvent.SET_AGENT_STATUS) {
				if (AgentService.agentStatus.isChief && !AgentService.sessionId && AgentService.agentStatus.checkIn && !AgentService.agentStatus.ready && !AgentService.agentStatus.afterWork) {
					setMenus(getHeaderMenus(configure.preferenceSettings.headerMenus));
				} else {
					const menus = configure.preferenceSettings.headerMenus.filter(item => item.key !== 'agentManagement');
					setMenus(getHeaderMenus(menus));
				}
			}
		});
		return () => {
			AgentService.removeEventListener();
		};
	}, [AgentService.getLanguage()]);

	useEffect(() => {
		if (!AgentService.sessionId) {
			const menus = configure.preferenceSettings.headerMenus.filter(item => item.key !== 'agentManagement');
			setMenus(getHeaderMenus(menus));
			if (AgentService.agentStatus.isChief && !AgentService.sessionId && AgentService.agentStatus.checkIn && !AgentService.agentStatus.ready && !AgentService.agentStatus.afterWork) {
				setMenus(getHeaderMenus(configure.preferenceSettings.headerMenus));
			} else {
				const menus = configure.preferenceSettings.headerMenus.filter(item => item.key !== 'agentManagement');
				setMenus(getHeaderMenus(menus));
			}
		}
	}, [AgentService.sessionId, AgentService.getLanguage()]);

	const TabItems = menus.map((item: any) => {
        const { label, key } = item;
        return key === 'serviceRecord' && hasUnfinishedSummary ? {
            label: (
                <><MenuSpan>{label}<MenuDot /></MenuSpan></>
            ),
            key: key,
            children: '',
        } : {
            label: label,
            key: key,
            children: '',
        };
    })

	return (
		<div className="widget-header-container">
			<Row className="widget-header-contents">
				<Tabs defaultActiveKey="1" activeKey={currentTab} onChange={value => changeTabs(value as ICurrentTab)} items={TabItems} children={''}></Tabs>
				<UserConfig agentName={login.agentName} changePageLayout={changeLayout}></UserConfig>
			</Row>
		</div>
	);
};

export default HeaderMenu;
